<template>
	<view class="mainCont">
		<view class="wrap">
			<view class="u-tabs-box" style="padding-top:50px;background-color: white;">
				<u-tabs-swiper class="utab" activeColor="#ffff00" ref="tabs" :list="list" :current="current"
					@change="changeSwiperCurrent" :is-scroll="false" swiperWidth="750" font-size="40"
					:bar-width="barWidth" bar-height="30"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">

				<swiper-item class="swiper-item" @touchmove.stop>
					<scroll-view @scroll="onScroll" scroll-y style="height: 100%;width: 100%;"
						@scrolltolower="reachBottom">
						<view class="page-box">
							<market ref="market" @change="changeSwiperCurrent" :navType="navType"></market>
						</view>
					</scroll-view>
				</swiper-item>

				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom"
						@scroll="onScrollRecommend">
						<view class="page-box">
							<view class="">
								<recommend ref="recommend"></recommend>
							</view>
						</view>
					</scroll-view>
				</swiper-item>

				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<view class="">
								<region></region>

							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>

			<view class="page-footer">
				<view class="contract-button">
					<!-- 自定义底部栏（可选） -->
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import QQMapWx from '@/common/qqmap-wx-jssdk.min.js'
	import market from './market/market.vue'
	import recommend from './recommend.vue'
	import region from './region/region.vue'
	export default {
		components: {
			market,
			recommend,
			region
		},
		data() {
			return {
				locationCity: '',
				list: [{
						name: '海鲜市场'
					},
					{
						name: '推荐'
					},
					{
						name: '未知'
					},
				],
				barWidth: 70,
				current: 1,
				swiperCurrent: 1,
				tabsHeight: 0,
				dx: 0,
				navType: "card"
			};
		},
		mounted() {
			
			try {
				if (uni.getStorageSync('address')) {
					this.list[2].name = uni.getStorageSync('address')
				}else{
					this.getLocation()
				}
			} catch (e) {
				// error
			}
		},
		computed: {

		},

		methods: {
			onScrollRecommend(e) {
				if (e.detail.scrollTop > 313) {
					//告诉子组件，导航需要吸附
					this.$refs.recommend.setPosition(true)
				} else {
					this.$refs.recommend.setPosition(false)
				}
			},
			onScroll(e) {
				if (e.detail.scrollTop > 60) {
					this.navType = "line"
				} else {
					this.navType = "card"
				}
			},
			reachBottom() {

				//触底更新瀑布流
				if (this.swiperCurrent === 1) {
					this.$refs.recommend.getshopList()
				} else if (this.swiperCurrent === 0) {
					this.$refs.market.getTopicSkuList()
				}

			},
			// tab栏切换
			changeSwiperCurrent(index) {
				if (index === 0) {
					this.barWidth = 140
				} else {
					this.barWidth = 70
				}
				this.swiperCurrent = index;

			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},

			//获取定位
			getAuthorize() {
				uni.authorize({
					scope: 'scope.userLocation',
					success: (res) => {
						this.getLocation()
					},
					fail: (err) => {
						uni.showModal({
							content: '需要授权位置信息',
							confirmText: '确认授权'
						}).then(res => {
							if (res['confirm']) {
								uni.openSetting({
									success: res => {
										if (res.authSetting['scope.userLocation']) {
											uni.showToast({
												title: '授权成功',
												icon: 'none'
											})
										} else {
											uni.showToast({
												title: '授权失败',
												icon: 'none'
											})
										}
										this.getLocation()
									}
								})
							}
							if (res['cancel']) {
								// 取消授权
								this.getLocation()
							}
						})
					}
				})
			},
			//开始获取定位方法
			getLocation() {
				const qqmapSdk = new QQMapWx({
					key: '7SZBZ-OYK6U-2NPVD-GLWBJ-VL2H6-AXBNV' // 在腾讯地图上申请的key
				})
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						const {
							latitude,
							longitude
						} = res
						qqmapSdk.reverseGeocoder({
							location: latitude ? `${latitude},${longitude }` : '',
							sig: '1IB9dYIUiDAVjOJMBgj1hyYlWzWIohJv', // 这个sig就是上面要准备的第二项SK
							success: (val) => {
								console.log('这就是要获取的当前所在城市的相关信息', val)
								this.locationCity = val.result.ad_info.city
								uni.setStorage({
									key: 'address',
									data: this.locationCity,
								})
								this.list[2].name = this.locationCity
							},
							fail: (err) => {
								console.log('获取城市失败')
							}
						})
					},
					fail: (err) => {
						if (err.errMsg === 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF' || err
							.errMsg === 'getLocation:fail system permission denied') {
							uni.showModal({
								content: '请开启手机定位服务',
								showCancel: false
							})
						} else if (err.errMsg === 'getLocation:fail:system permission denied') {
							uni.showModal({
								content: '请给微信开启定位权限',
								showCancel: false
							})
						}
					}
				})
			}

		}
	};
</script>
<style scoped lang="scss">
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.mainCont {
		background: #F5F5F5;
	}

	// tabs framework config
	.u-tabs-box {
		padding-bottom: 17rpx;
	}

	.page-box {
		// width: 686rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		// margin-left: 32rpx;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
		overflow: visible;
	}

	// footer config
	.page-footer {
		width: 750rpx;
		height: 128rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 16rpx rgba(219, 208, 208, 0.61);
		opacity: 1;
		border-radius: 0rpx;

		.contract-button {
			width: 686rpx;
			height: 80rpx;

			margin-top: 24rpx;
			margin-left: 32rpx;

			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;

			text-align: center;

			line-height: 80rpx;
			color: #FFFFFF;
			letter-spacing: 5rpx;

			background: linear-gradient(137deg, #FF3229 0%, #FF7B59 100%);
			opacity: 1;
			border-radius: 40rpx;
		}

	}

	.utab /deep/ .u-tabs {
		width: 70%;
		float: left;
		// margin-left: 20px;
	}
</style>